@use "sass:math";
@import "./vars.scss";
@import "./utils.scss";

@each $colorPackageName,
$colorPackageValue in $colorPackages {
    .c-front-color-#{$colorPackageName} {
        color: map-get($colorPackageValue, "frontColor");
    }

    .c-front-color-#{$colorPackageName}-reverse {
        color: map-get($colorPackageValue, "frontColorReverse");
    }

    .c-bg-color-#{$colorPackageName} {
        background-color: map-get($colorPackageValue, "bgColor");
    }

    .c-bg-color-#{$colorPackageName}-reverse {
        background-color: map-get($colorPackageValue, "bgColorReverse");
    }

    .c-color-#{$colorPackageName} {
        color: map-get($colorPackageValue, "frontColor");
        background-color: map-get($colorPackageValue, "bgColor");
    }

    .c-color-#{$colorPackageName}-reverse {
        color: map-get($colorPackageValue, "frontColorReverse");
        background-color: map-get($colorPackageValue, "bgColorReverse");
    }
}

@each $sizePackageName,
$sizePackageValue in $sizePackages {
    $size: map-get($sizePackageValue, "size");
    $borderRadius: map-get($sizePackageValue, "borderRadius");

    .c-round-#{$sizePackageName} {
        border-radius: $borderRadius;
        overflow: hidden;
    }

    .c-round-t-#{$sizePackageName} {
        border-top-left-radius: $borderRadius;
        border-top-right-radius: $borderRadius;
        overflow: hidden;
    }

    .c-round-b-#{$sizePackageName} {
        border-bottom-left-radius: $borderRadius;
        border-bottom-right-radius: $borderRadius;
        overflow: hidden;
    }

    .c-round-l-#{$sizePackageName} {
        border-top-left-radius: $borderRadius;
        border-bottom-left-radius: $borderRadius;
        overflow: hidden;
    }

    .c-round-r-#{$sizePackageName} {
        border-top-right-radius: $borderRadius;
        border-bottom-right-radius: $borderRadius;
        overflow: hidden;
    }

    .c-square-#{$sizePackageName} {
        width: $size;
        height: $size;
    }

    .c-width-#{$sizePackageName} {
        width: $size;
    }

    .c-height-#{$sizePackageName} {
        height: $size;
    }

    .c-font-size-#{$sizePackageName} {
        font-size: map-get($sizePackageValue, "fontSize");
    }

    .c-shadow-#{$sizePackageName} {
        box-shadow: 1px 1px math.div($size, 4) $defaultShadowColor;
    }
}

@function getSpaceStr($sizePackageName, $ratioName, $useImportant) {
    @if $ratioName ==0 {
        @if $useImportant {
            @return unquote("0 !important");
        }

        @return 0;
    }

    @return $sizePackageName * $ratioName;
}

@each $directionName,
$directionValue in $directions {
    .c-b#{getUnionStr($directionName)} {
        @each $directionItem in $directionValue {
            border-#{$directionItem}: 1px solid $defaultBorderColor;
        }
    }

    .c-b#{getUnionStr($directionName)}-0 {
        @each $directionItem in $directionValue {
            border-#{$directionItem}: 0 !important;
        }
    }
}

@each $spacePropName,
$spacePropValue in $spaceProps {

    @each $directionName,
    $directionValue in $directions {

        @each $sizePackageName,
        $sizePackageValue in $sizePackages {

            @each $ratioName,
            $ratioValue in $ratios {
                .c-#{$spacePropName}#{getUnionStr($directionName)}-#{$sizePackageName}#{getUnionStr($ratioName)} {
                    @each $directionItem in $directionValue {
                        #{$spacePropValue}-#{$directionItem}: getSpaceStr(map-get($sizePackageValue, "space"),
                                $ratioValue,
                                true);
                    }
                }
            }
        }
    }
}